<template>
    <div>

        <input type="button" value="退出" @click="output">
<h1>房号列表</h1>
<a href="/add">新增房号</a>
<a href="/Login">登录</a>
<h1>{{ username }}</h1>
<table class="table">
    <thead>
        <tr>
            <td>
                <input type="checkbox" @change="selectall" v-model="selectallstate">
            </td>
            <td>id</td>
            <td>name</td>
            <td>price</td>
            <td>img</td>
            <td>state</td>
        </tr>
    </thead>
    <tbody>
        <tr v-for="h in data">
            <td>
                <input v-model="idlist" type="checkbox" :value="h.id">
            </td>
            <td>{{h.id}}</td>
            <td>{{h.name}}</td>
            <td>{{h.price}}</td>
            <td>{{h.img}}</td>
            <td>{{h.state}}</td>
        </tr>
    </tbody>
</table>
    <input type="button" value="已预订和空闲切换" @click="houseupdate">
    <input type="button" value="都设置为已预订" @click="setupdtetrue">
    <input type="button" value="批量真删除" @click="deleteall">
    </div>
</template>
<script setup lang="ts">
import { ref,onMounted, render } from 'vue';
import axios from 'axios';

import { useMemberStore} from '@/stores/user'
import router from '@/router';
const user = useMemberStore()
const username = ref("")
const idlist = ref([0]);  //保存所有选中的行编号

const selectallstate = ref(false)

//全选全取消
const selectall=()=>{
   //获取全选的状态
    debugger
   if(selectallstate.value)
   {
        //循环表相对的Model
        for(var i=0;i<data.value.length;i++)
            {
                idlist.value.push(data.value[i].id); 
            }

   }
   else{
        idlist.value=[0]
   }
   



  
}


//已预订和空闲切换
const houseupdate=()=>{
    //调用API
    axios.get("https://localhost:7174/api/HouseNum/UpdateState",{params:{idstring:idlist.value.toString()}}).then(res=>{
        if(res.data>0){
            alert('成功')
            getData();
        }
        else{
            alert('已预订和空闲切换失败了。。。')
        }

    })
}

//都设置为已预订
const setupdtetrue=()=>{
    //调用API
    axios.delete("https://localhost:7174/api/HouseNum/DeleteRangeLogic",{params:{idstring:idlist.value.toString()}}).then(res=>{
        if(res.data>0){
            alert('设置为已预订成功')
            getData();
        }
        else{
            alert('设置为已预订失败了。。。')
        }

    })
}


//真的批量删除
const deleteall=()=>{
    if(!confirm("真的要删除吗")){
        return;
    }
    debugger
    if(idlist.value.length > 0){
        alert('请先选择行id')
        return;
    }


    //调用API
    axios.delete("https://localhost:7174/api/HouseNum/DeleteRange",{params:{idstring:idlist.value.toString()}}).then(res=>{
        if(res.data>0){
            alert('设置为已预订成功')
            getData();
        }
        else{
            alert('设置为已预订失败了。。。')
        }

    })
}


const data=ref([
{
      "id": 1,
      "name": "string",
      "price": 0,
      "isDeposit": true,
      "deposit": 0,
      "area": 0,
      "count": 0,
      "isNode": true,
      "node": "string",
      "extraBed": 0,
      "extraBedPrice": 0,
      "img": "string",
      "state": 0,
      "houseTypeId": 0
    }
])

onMounted(()=>{
    getData();

    username.value = user.userinfo.username;
})

const querydata=ref({
    index:1,
    size:20,
    pmin:0,
    pmax:0,
    State:0
});



//调用分页API接口
const getData=()=>{
axios.get("https://localhost:7174/api/HouseNum/GetHouseNumPageWhere",{params:querydata.value}).then(res=>{
    data.value = res.data.b;
})
}

const output=()=>{
    user.userinfo.islogin=false;
    router.push({path:'/login'})
}


</script>

<style scoped>

</style>